<template>
<div class="common-layout">
    <el-container class="home-container">

      <el-header>
        <el-row>
           <el-col :span="8"><div class="grid-content" /></el-col>
            <el-col :span="8"><div class="grid-content" />
             <el-icon :size="25"><Menu/></el-icon>
              后台资源管理系统
           </el-col>
                  <el-col :span="1" :offset="5"><div class="grid-content" />
                   <el-button id="logout" @click="logout" type="danger" round>退出登录</el-button>
                   </el-col>

      
       
       </el-row>
       </el-header>
      <el-container>
 
        <el-aside :width="isCollapse?'64px':'200px'" >
            <el-switch v-model="isCollapse" />
             <el-menu
             :collapse-transition="false"
              :collapse="isCollapse"
       text-color="white"
         active-text-color="#ced6e0"
         background-color= "#786fa6"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose">
        <el-sub-menu index="1">
          <template #title>
          <el-icon><Avatar /></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item-group >
            <el-menu-item index="1-1">item one</el-menu-item>
            <el-menu-item index="1-2">item one</el-menu-item>
          </el-menu-item-group>
    
        </el-sub-menu>



        <el-sub-menu index="2">
             <template #title>
          <el-icon><Briefcase /></el-icon>
          <span>权限管理</span>
          </template>
      
             <el-menu-item-group >
            <el-menu-item index="2-1">角色列表</el-menu-item>
            <el-menu-item index="2-2">权限列表</el-menu-item>
          </el-menu-item-group>
      </el-sub-menu>

         <el-sub-menu index="3">
             <template #title>
        <el-icon><IceCreamRound /></el-icon>
          <span>商品管理</span>
          </template>
      
             <el-menu-item-group >
            <el-menu-item index="3-1">商品1</el-menu-item>
            <el-menu-item index="3-2">商品2</el-menu-item>
          </el-menu-item-group>
      </el-sub-menu>



         <el-sub-menu index="4">
             <template #title>
         <el-icon><Link /></el-icon>
          <span>订单管理</span>
          </template>
      
             <el-menu-item-group >
            <el-menu-item index="4-1">订单1</el-menu-item>
            <el-menu-item index="4-2">订单2</el-menu-item>
          </el-menu-item-group>
      </el-sub-menu>


 <el-sub-menu index="5">
             <template #title>
         <el-icon><View /></el-icon>
          <span>数据统计</span>
          </template>
      
             <el-menu-item-group >
            <el-menu-item index="5-1">数据1</el-menu-item>
            <el-menu-item index="5-2">数据2</el-menu-item>
          </el-menu-item-group>
      </el-sub-menu>
      </el-menu>
        </el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import doRequire from "./axios.js"
import {onMounted, ref,watchEffect} from "vue"
import { ElMessage } from 'element-plus'

import router from './router'
let isCollapse = ref(true)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}


//退出登录
const logout=()=>{
  doRequire("http://localhost:8080/user/logout").then(res=>{
  console.log(res.data);       
     ElMessage.success("退出成功");
     router.push("login")
}).finally(()=>{  localStorage.removeItem("token");
})

}

onMounted(()=>{
    if(!(localStorage.getItem("userTokenStatus")=='ok')){
      
       ElMessage.error("请重新登录哦")
        router.push("login");
    }
})


</script>

<style lang="scss" scoped>
.common-layout{
    margin:0;
    padding: 0;
    overflow-y: hidden;
}
     .home-container{
         height: 100vh;
     }
      .el-header {
          
           background-color: #574b90;
           height:70px;
           font-size:30px;
           text-align: center;
           line-height:70px
          
      }
    
      .el-aside{
            background-color: #786fa6;
            max-height: 100vh;
            overflow:auto;
            overflow-x:hidden;
         
      }
      
        .el-main{
            background-color:#dfe4ea ;
        }
       
</style>